<template>
  <div class="content-wrapper">
    <div class="content-header">企业设置</div>
    <div class="content-container">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="基本信息" name="first">
          <el-form
            ref="dataForm"
            :rules="dataRules"
            :model="temp"
            label-position="right"
            label-width="90px"
          >
            <el-form-item label="编码" prop="corpCode">
              <el-input v-model.trim="temp.corpCode" />
            </el-form-item>
            <el-form-item label="名称" prop="corpName">
              <el-input v-model.trim="temp.corpName" />
            </el-form-item>
            <!-- <el-form-item label="简称" prop="corpAbbr">
              <el-input v-model.trim="temp.corpAbbr" />
            </el-form-item> -->
            <el-form-item label="省/市/县(区)" prop="provinceRegionName">
              <el-cascader
                :options="regions"
                filterable
                v-model="region"
              @change="updateRegion"></el-cascader>
            </el-form-item>
            <el-form-item label="详细地址" prop="corpName">
              <el-input v-model.trim="temp.address" />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="updateData()">提交</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="电子签章" name="second"> 电子签章 </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import waves from "@/directive/waves"; // waves directive
import Pagination from "@/components/Pagination";
import { listCorp, updateCorp } from "@/api/base/corp";
import { regionsListTreeItem } from "@/api/base/regions";

export default {
  name: "ComplexTable",
  components: { Pagination },
  directives: { waves },
  data() {
    return {
      activeName: 'first',
      list: null,
      total: 0,
      listLoading: true,
      listQuery: {
        pageNumber: 1,
        pageIndex: 0,
        pageSize: 20,
        corpCode: "",
      },
      temp: {
        corpCode: "",
        corpName: "",
      },
      dialogFormVisible: false,
      dialogStatus: "",
      textMap: {
        update: "修改",
        create: "新增",
      },
      listQueryRules: {
        corpCode: [
          {
            pattern: /^[a-zA-Z0-9_-]+$/,
            message: "编码由a-zA-Z0-9_-等字母组成",
            trigger: "change",
          },
        ],
      },
      dataRules: {
        corpCode: [
          { required: true, message: "编码不能为空", trigger: "change" },
          {
            pattern: /^[a-zA-Z0-9_-]+$/,
            message: "编码由a-zA-Z0-9_-等字母组成",
            trigger: "change",
          },
        ],
        corpName: [
          { required: true, message: "名称不能为空", trigger: "change" },
        ],
        // corpAbbr: [
        //   { required: true, message: "名称不能为空", trigger: "change" },
        // ],
      },
      regions: [],
      region: []
    };
  },
  created() {
    console.log(this.$store, 'this.$store.state');
    this.getList();
  },
  mounted() {
    this.getRegionsListTree()
  },
  methods: {
    updateRegion(val){
      console.log(val)
      if (val && val.length > 0) {
        this.temp.provinceRegionId = val[0]
        this.temp.cityRegionId = val[1]
        this.temp.districtRegionId = val[2]
      }
    },
    getRegionsListTree(){
      regionsListTreeItem().then(res => {
        this.regions = res.data
        console.log(this.regions, 'this.regions')
      })
    },
    handleClick(){

    },
    changeCellStyle({ row, column, rowIndex, columnIndex }) {
      if (
        (columnIndex === 1 && (row.dataStatus & 1) !== 1) ||
        (columnIndex === 3 && (row.dataStatus & 2) !== 2)
      ) {
        return "backWarning";
      }
    },
    getList() {
      this.listQuery.pageIndex = this.listQuery.pageNumber - 1;
      this.listLoading = true;
      listCorp(this.listQuery).then((response) => {
        this.list = response.data.rows;
        this.total = response.data.total;
        this.temp = this.list[0]
        this.region = [this.temp.provinceRegionId,this.temp.cityRegionId,this.temp.districtRegionId]
        console.log(this.temp, 'this.temp')
        this.listLoading = false;
      });
    },
    handleFilter() {
      this.listQuery.pageNumber = 1;
      this.getList();
    },
    resetTemp() {
      this.temp = {
        corpCode: "",
        corpName: "",
      };
    },
    handleUpdate(row) {
      this.temp = Object.assign({}, row); // copy obj
      this.temp.timestamp = new Date(this.temp.timestamp);
      this.dialogStatus = "update";
      this.dialogFormVisible = true;
      this.$nextTick(() => {
        this.$refs["dataForm"].clearValidate();
      });
    },
    updateData() {
      this.$refs.dataForm.validate((valid) => {
        if (valid) {
          // this.temp.itemList = [];
          // this.temp.resourceIds.forEach((item) => {
          //   const tmp = {
          //     resourceId: item,
          //     action: 0,
          //   };
          //   this.temp.itemList.push(tmp);
          // });
          // const tempData = Object.assign({}, this.temp);
          updateCorp(this.temp).then(() => {
            const index = this.list.findIndex((v) => v.id === this.temp.id);
            this.list.splice(index, 1, this.temp);
            this.dialogFormVisible = false;
            this.$message({
              message: "操作成功",
              type: "success",
            });
            this.handleFilter();
          });
        }
      });
    },
  },
};
</script>

<style scoped>
</style>
